<template>
  <div>
    <nav-bar title="签到">
      <template v-slot:right>
        <span class="fontSize14" @click="historyRecord">历史记录</span>
      </template>
    </nav-bar>
    <div class="maxinBox">
      <div class="" style="padding: 0.625rem;">
        <div class="tabNav" @click="onScan(1)">
          <p style="line-height: 1.875rem;border-bottom: 0.0625rem solid #ccc;padding: 0.625rem 0;font-size: 1.25rem;">
            <img src="../../../assets/images/signIcon.png" alt="">
            点位签到
            <van-icon style="float: right;" name="arrow" />
          </p>
          <p style="line-height: 1.875rem" class="fontSize12">
            扫描施工区域二维码，进行工作位置登记</br>进场{{time}}分钟内或更换工作位置未打卡，将视为违规</p>
        </div>
        <div class="tabNav" @click="onScan(2)">
          <p style="line-height: 1.875rem;border-bottom: 0.0625rem solid #ccc;padding: 0.625rem 0;font-size: 1.25rem;">
            <img src="../../../assets/images/signIcon.png" alt="">
            <span v-if="signStatus">加班中... {{workTime}}</span>
            <span v-else>加班签到</span>
            <van-icon style="float: right;" name="arrow" />
          </p>
          <p style="line-height: 1.875rem;" class="fontSize12">
            <span>
              扫描施工区域二维码，进行加班工作位置登记</br>最多允许提前{{time}}分钟签到
            </span>
          </p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import moment from 'moment'
  import signManage from '../../../api/workAPI/signManage.js'
  export default {
    data() {
      return {
        time: '',
        signStatus: null,
      }
    },
    computed: {
      workTime: function() {
        let date = moment(new Date()).valueOf() - moment(this.signStatus.checkTime).valueOf()
        let hour = Math.floor((date / 3600000) % 24)
        let minute = Math.floor((date / 60000) % 60)
        let second = Math.floor(date % 60)
        return hour + ':' + minute + ':' + second
      }
    },
    methods: {
      onScan(data) {
        let status
        if (data === 1) {
          status = data
        } else {
          if (this.signStatus) {
            status = 3
          } else {
            status = 2
          }
        }
        localStorage.setItem('signStatus', status)
        this.$router.push({
          name: 'SignScan'
        })
      },
      getSignStatus() {
        let projectId = localStorage.getItem('projectId')
        signManage.SignStatus(projectId).then(res => {
          this.signStatus = res
        })
      },
      getTime() {
        signManage.getTime().then(res => {
          this.time = res.interval
        })
      },
      historyRecord() {
        this.$router.push({
          name: 'HistoryRecord'
        })
      },
    },
    mounted() {
      this.getTime()
      this.getSignStatus()
    }
  }
</script>
<style scoped lang="scss">
  .tabNav:nth-child(1) {
    background-image: url(../../../assets/images/signImg.png);
  }
  .tabNav:nth-child(2) {
    margin-top: 0.625rem;
    background-image: url(../../../assets/images/signImgs.png);
  }
  .tabNav{
    opacity: 0.8;
    color: #fff;
    width: 91%;
    background-size: 100% 100%;
    padding: 0.625rem 0.9375rem;
  }
</style>
